<%@page import="com.xnx3.j2ee.Global"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>  
<%@ taglib uri="http://www.xnx3.com/java_xnx3/xnx3_tld" prefix="x" %>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<jsp:include page="/wm/common/head.jsp">
	<jsp:param name="title" value="数据统计"/>
</jsp:include>
<div style="height:10px;"></div>
<jsp:include page="/wm/common/list/formSearch_formStart.jsp" ></jsp:include>
<label style="text-align: left;" class="layui-form-label">日期范围</label>
		<div class="layui-input-inline">
			<jsp:include page="/wm/common/edit/form_datebmrq.jsp">
			<jsp:param name="wm_name" value="startTime"/>
			<jsp:param name="wm_value" value="${entity.selecttime }"/>
			<jsp:param name="wm_type" value="date"/>
		    </jsp:include>
		</div>
		&nbsp;-&nbsp;
		<div class="layui-input-inline">
			<jsp:include page="/wm/common/edit/form_datebmrq.jsp">
			<jsp:param name="wm_name" value="endTime"/>
			<jsp:param name="wm_value" value="${entity.selecttime }"/>
			<jsp:param name="wm_type" value="date"/>
		    </jsp:include>
		</div>
	<a class="layui-btn" href="javascript:wm.list(1,'/agency/statistics/getUserAnalyze.json');" style="margin-left: 15px;">搜索</a>
	<a class="layui-btn" onclick="getUserExecl();">导出excel</a>
	
</form>
<style>
	.losk{
		padding: 20px 0;
		margin: 0 0 40px;
		display: flex;
		justify-content: center;
		align-content: center;
		align-items: center;
	}
	#container{
		display: block;
		flex: 1;
	}
.iw_table{
		width: 90vw;
		margin: -40px auto 50px;
	}
</style>
<div class="losk">
	<div id="container" style="height: 500px;width:auto；margin:60px auto 100px;"></div>
</div>	

<table class="aui-table-responsive layui-table iw_table" style="min-width: 900px;"id="orderfenxi">
	<thead>
		<tr>
			<th width="50px" style="text-align:center;">日期</th>
			<th width="50px" style="text-align:center;">新用户下单数</th>
			<th width="50px" style="text-align:center;">老用户下单数</th>
			
		</tr> 
	</thead>
	<tbody id="tbody">
		<tr >
			<td style="text-align:center;">{riqi}</td>
			<td style="text-align:center;">{newUserNum}</td>
			<td style="text-align:center;">{oldUserNum}</td>
			
		</tr>
	</tbody>
</table>
</form>
<script type="text/javascript" src="/js/echarts.min.js"></script>
<script type="text/javascript">

//列表的模版
var goodsListTemplate = document.getElementById("tbody").innerHTML;
function goodsListDate(item){
	return goodsListTemplate
		.replace(/\{riqi\}/g, item.riqi)
		.replace(/\{newUserNum\}/g, item.newUserNum)
		.replace(/\{oldUserNum\}/g, item.oldUserNum)
		;
}

function loadData(data){
		msg.close();    //关闭“更改中”的等待提示
		var list = data.list;
		if(data.result == '1'){
			//列表
			var html = '';
			for(var index in data.list){
				var item = data.list[index];
				html = html + goodsListDate(item);
			}
			document.getElementById("tbody").innerHTML = html;
			var dom = document.getElementById("container");
			var myChart = echarts.init(dom);
			var app = {};
			var option;
			var a = data.dateI;
			option = {
					title: { 
						text: '用户下单柱形图',
						left: '10px'
						},
				color: ["#32CD32", "#FF4136"],
				legend: {
					orient: "horizontal",
					x: "center",
					y: "top",
					data: ["新用户下单数", "老用户下单数"]
				},
				grid: {
					top: "18%",
					left: "2%",
					right: "4.3%",
					bottom: "7%",
					containLabel: !0
				},
				tooltip: {
					trigger: "axis"
				},
				xAxis: {
					type: "category",
					axisLine: {
						lineStyle: {
							color: "#303133"
						}
					},
					axisLabel: {
						rotate: 45,
						interval: 0
					},
					boundaryGap: !0,
					data: a
				},
				yAxis: [{
					type: "value",
					name: "个数",
					axisLabel: {
						formatter: "{value} (个)"
					}
				}],
				series: [{
					name: "新用户下单数",
					type: "bar",
					data: data.jsonObject['新用户下单数'],
					symbolSize: 4,
					yAxisIndex: 0,
					smooth: !0,
					barWidth: 18,
					itemStyle: {
						normal: {
							label: {
								show: !1
							},
							barBorderRadius: [17, 17, 17, 17]
						}
					}
				}, {
					name: "老用户下单数",
					type: "bar",
					data: data.jsonObject['老用户下单数'],
					symbolSize: 4,
					yAxisIndex: 0,
					smooth: !0,
					barWidth: 18,
					itemStyle: {
						normal: {
							label: {
								show: !1
							},
							barBorderRadius: [17, 17, 17, 17]
						}
					}
				}]
			};
		if (option && typeof option === 'object') {
		    myChart.setOption(option);
		}
		
	}
	
}

wm.post('/agency/statistics/getUserAnalyze.json',{}, function(data){
	loadData(data);
});


</script>


<style>
#page{
	display:none;
}
</style>
<jsp:include page="/wm/common/page.jsp"></jsp:include>
<script>
wm.list = function(currentPage, api, extendFunction){
	if(typeof(api) != 'undefined' && api != null){
		wm.list_api = api;
	}
	if(typeof(wm.list_api) == 'undefined' || wm.list_api == null || wm.list_api.length < 1){
		wm.list_api = 'list.json';
	}
	var data = wm.getJsonObjectByForm($('.toubu_xnx3_search_form'));
	data.currentPage = currentPage;
	msg.loading('加载中');
	wm.post(wm.list_api ,data,function(data){
		msg.close();    //关闭“更改中”的等待提示
		checkLogin(data);	//判断是否登录
	
		//将json返回的赋予 vue的全局变量
		for(var key in data){
			app[key] = data[key];
		}
		
		//已登陆
		if(data.result == '1'){
			loadData(data);
			
			
		}else{
			msg.failure(data.info);
		}
	});
}
/**
 * 对象转url参数
 * @param {*} data,对象
 * @param {*} isPrefix,是否自动加上"?"
 */
function queryParams(data = {}, isPrefix = true, arrayFormat = 'brackets') {
    let prefix = isPrefix ? '?' : ''
    let _result = []
    if (['indices', 'brackets', 'repeat', 'comma'].indexOf(arrayFormat) == -1) arrayFormat = 'brackets';
    for (let key in data) {
        let value = data[key]
        // 去掉为空的参数
        if (['', undefined, null].indexOf(value) >= 0) {
            continue;
        }
        // 如果值为数组，另行处理
        if (value.constructor === Array) {
            // e.g. {ids: [1, 2, 3]}
            switch (arrayFormat) {
                case 'indices':
                    // 结果: ids[0]=1&ids[1]=2&ids[2]=3
                    for (let i = 0; i < value.length; i++) {
                        _result.push(key + '[' + i + ']=' + value[i])
                    }
                    break;
                case 'brackets':
                    // 结果: ids[]=1&ids[]=2&ids[]=3
                    value.forEach(_value => {
                        _result.push(key + '[]=' + _value)
                    })
                    break;
                case 'repeat':
                    // 结果: ids=1&ids=2&ids=3
                    value.forEach(_value => {
                        _result.push(key + '=' + _value)
                    })
                    break;
                case 'comma':
                    // 结果: ids=1,2,3
                    let commaStr = "";
                    value.forEach(_value => {
                        commaStr += (commaStr ? "," : "") + _value;
                    })
                    _result.push(key + '=' + commaStr)
                    break;
                default:
                    value.forEach(_value => {
                        _result.push(key + '[]=' + _value)
                    })
            }
        } else {
            _result.push(key + '=' + value)
        }
    }
    return _result.length ? prefix + _result.join('&') : ''
}

//导出execl
function getUserExecl(){
	var data = wm.getJsonObjectByForm($('.toubu_xnx3_search_form'));
	 window.open('/agency/outdoc/getUserDataExecl.json' + queryParams(data)); 
} 
</script>
<jsp:include page="/wm/common/foot.jsp"></jsp:include>